<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :footer="null"
    :width="1100"
    :title="state.rowData.stnm"
    :height="580"
    :destroyOnClose="true"
    :centered="true"
    :canFullscreen="false"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <div class="content">
      <div class="main">
        <div class="left_info">
          <h3 class="title">基础信息</h3>
          <ul class="listWrap">
            <li class="listItem">
              <p>当前时间 :</p>
              <p>{{ state.time }}</p>
            </li>
            <li class="listItem">
              <p>闸门开度 :</p>
              <p>{{ state.gateConfig?.gtophgt || "0.00" }} (m)</p>
            </li>
            <li class="listItem">
              <p>当前电压 :</p>
              <p>{{ state.gateConfig?.voltage || "--" }} (V)</p>
            </li>
            <li class="listItem">
              <p>当前电流 :</p>
              <p>{{ state.gateConfig?.electricity || "--" }} (A)</p>
            </li>

            <li class="listItem">
              <p>电源状态 :</p>
              <p>
                <span v-if="state.gateConfig?.powerStatus == 1">开启</span>
                <span v-else>关闭</span>
              </p>
            </li>
            <li class="listItem">
              <p>启闭状态 :</p>
              <p>{{ state.gateConfig?.currentStatus }}</p>
            </li>

            <li class="listItem">
              <p>荷重 :</p>
              <p>{{ state.gateConfig?.load || "--" }} (t)</p>
            </li>
            <li class="listItem">
              <p>荷重告警 :</p>
              <p>
                <span v-if="state.gateConfig?.load90Warning == 1">涵闸荷重90%告警</span>
                <span v-else-if="state.gateConfig?.load110Warning == 1"
                  >涵闸荷重110%告警</span
                >
                <span v-else-if="state.gateConfig?.loadQZWarning == 1"
                  >涵闸荷重欠载告警</span
                >
                <span v-else>--</span>
              </p>
            </li>
            <li class="listItem">
              <p>控制状态 :</p>
              <p>
                <span v-if="state.gateConfig?.remoteStatus == 1">远程</span>
                <span v-else>现地</span>
              </p>
            </li>
          </ul>

          <div class="btn">
            <h3 class="title">闸门控制</h3>
            <div class="parameters">
              <section>
                <p>开度设定(0~1m)：</p>
                <a-input-number
                  class="inputNumber"
                  v-model:value="state.openSize"
                  :min="0"
                  :max="1"
                  :precision="2"
                  placeholder="设定范围 0.00 ~ 1.00"
                />
              </section>
              <section>
                <p>控制密码：</p>
                <a-input-password
                  class="inputNumber"
                  v-model:value="state.password"
                  :min="0"
                  :max="1"
                  :precision="2"
                />
              </section>
            </div>
            <div class="operationBtn">
              <a-popconfirm
                title="是否执行闸门开度设定操作？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleUpdateGate"
              >
                <div class="btn1" style="width: 200px">执行开度</div>
              </a-popconfirm>
            </div>
            <div class="operationBtn">
              <a-popconfirm
                title="是否执行开启闸门操作？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="hanldClickGateUp"
              >
                <div class="btn1">启门</div>
              </a-popconfirm>
              <a-popconfirm
                title="是否执行停止闸门操作？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="hanldClickGateStop"
              >
                <div class="btn2">停止</div>
              </a-popconfirm>
              <a-popconfirm
                title="是否执行关闭闸门操作？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="hanldClickGateDown"
              >
                <div class="btn1">闭门</div>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <div class="right_video">
          <h3 class="title">视频列表</h3>
          <ul class="videoList">
            <li
              v-for="(item, index) in state.videoList"
              :key="'video' + index"
              :class="{ active: state.activeIndex == index }"
            >
              <div
                class="videoRef"
                v-if="item.startUrl && item.startUrl.flv"
                @click="openMaxVideo(index)"
              >
                <Video :videoUrl="item.startUrl.flv" />
              </div>
              <div class="bg" v-else></div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <VideoPopup @register="videoModal" />
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive, provide, onUnmounted } from "vue";
import { BasicModal, useModalInner, useModal } from "@gui-pkg/antdcomponents";
import { getVideoPlayUrl } from "@/api/mapServices/mapData";
import Video from "./video/index.vue";
import { updateGate, setDeviceGateUp, checkGateConfig } from "@/api/oneMap/baseData";
import VideoPopup from "@/components/VideoPopup/index.vue";
import dayjs from "dayjs";

/*"voltage": "395.0",  //电压
"electricity": "0.112",   //电流
"currentStatus": null, //启闭机状态（后端给直接用）
"isAllUp": "下降到底了",   //到底
"isAllDown": null,    //到顶
"powerStatus": "1",    //电源状态（1：开启，非1：关闭）
"load90Warning": "0",  //涵闸荷重90%告警（荷重告警）
"load110Warning": "0",   //涵闸荷重110%告警（荷重告警）
"loadQZWarning": "1",  //涵闸荷重欠载告警（荷重告警）
"remoteStatus": "1",   //控制状态（1：远程，非1：现地）
"load": "0.4", //荷重
“gtophgt”: 0.1 //闸门开度*/

const modalHeightValue = ref(560);
const intervalId = ref();
const state = reactive({
  stcd: "",
  rowData: {},
  openSize: "",
  password: "",
  videoList: [],
  activeIndex: -1,
  time: "",
  gateConfig: null,
});

const [videoModal, { openModal: openVideoModal }] = useModal();

const [register, { setModalProps }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false });
  let { stcd, rowData } = data;
  state.rowData = { ...rowData };
  state.stcd = stcd;
  getPlayVideoUrlList();
  getGateConfiga();
  intervalId.value = setInterval(getGateConfiga, 10000);
});

const openMaxVideo = (index) => {
  let findSelect = state.rowData;
  if (findSelect) {
    openVideoModal(true, {
      stcd: findSelect.stcd,
      rowData: { ...findSelect },
      videoIndex: index,
    });
  }
};

const selectVideo = (index) => {
  if (state.activeIndex == index) {
    state.activeIndex = -1;
    return;
  }
  state.activeIndex = index;
};

const getPlayVideoUrlList = async () => {
  let videoStcd = "";
  let find = { ...state.rowData };
  if (find) {
    videoStcd = find.videoStcd;
    if (videoStcd) {
      let data = await getVideoPlayUrl({ videoStcd });
      if (data && data.length) {
        state.videoList = [...data];
      }
    } else {
      state.videoList = [];
    }
  }
};

// 执行闸门开度
const handleUpdateGate = async () => {
  const paramData = {
    stcd: state.stcd,
    openSize: state.openSize,
  };
  await updateGate(paramData);
};

// 点击开闸事件 1上升、0停止、-1下降
const hanldClickGateUp = () => {
  etDeviceGateUp({ stcd: state.stcd, status: 1 });
  console.log("gateUpResult");
};
//点击合闸事件
const hanldClickGateDown = () => {
  setDeviceGateUp({ stcd: state.stcd, status: -1 });
  console.log("gateDownResult");
};
// 点击停止事件
const hanldClickGateStop = () => {
  setDeviceGateUp({ stcd: state.stcd, status: 0 });
  console.log("gateStopResult");
};

// 获取闸门信息
const getGateConfiga = async () => {
  state.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
  const gateConfig = await checkGateConfig(state.stcd);
  console.log(gateConfig, "gateConfig");
  state.gateConfig = gateConfig;
};

// 弹窗高度变化，主要是监听是否点击了全屏
const handleHeightChange = (height: string) => {
  modalHeightValue.value = height;
};
provide("ModalHeightChange", modalHeightValue);

onUnmounted(() => {
  clearInterval(intervalId.value);
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.content {
  padding: 20px;
  height: 100%;
  width: 100%;
  position: relative;
  h3.title {
    width: 100%;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    display: flex;
    align-items: center;
    color: #fff;
    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      background: url(@/assets/images/subtitle.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 6px;
    }
  }
  .main {
    display: flex;
    justify-content: space-between;
    .left_info {
      width: 52%;
      ul.listWrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      li.listItem {
        width: 49%;
        height: 34px;
        margin-bottom: 10px;
        background: url(./table_bg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        color: #fff;
        padding: 6px 10px;
        p {
          width: 100%;
          color: #fff;
          // text-align: center;
          font-size: 15px;
          &:nth-of-type(2) {
            width: 160px;
            flex-shrink: 0;
          }
        }
        &:hover {
          background: url(./table_bg_a.png) no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }

      .btn {
        // height: 60px;
        // position: absolute;
        // left: 0;
        // right: 0;
        // bottom: 80px;
        .parameters {
          margin-top: 10px;
          // display: flex;
          align-items: center;
          section {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            p {
              font-size: 16px;
              width: 150px;
              color: #b4dfff;
              padding-left: 10px;
            }
            .inputNumber {
              width: 280px !important;
              height: 32px;
              background: #003e7e6b;
              border: 1px solid;
              border-image: linear-gradient(
                181deg,
                rgba(6, 183, 253, 0.4) 3.03%,
                #51fbff 47.23%,
                rgba(6, 183, 253, 0.4) 91.41%
              );
              border-image-slice: 1;
              color: #fff;
              font-size: 14px;
              border-radius: 6px;
            }
            ::v-deep(.ant-input) {
              background: #003e7e6b !important;
              color: #fff;
            }
          }
        }
        .operationBtn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          // padding-left: 60px;
          margin-top: 20px;
          margin-bottom: 10px;
          .btn1 {
            width: 140px;
            height: 30px;
            margin: 0 10px;
            letter-spacing: 0.1em;
            font-size: 16px;
            // background: url(./btn1.png) no-repeat;
            // background-size: contain;
            background: linear-gradient(
              180deg,
              rgba(0, 40, 81, 0.6) -10.87%,
              rgba(2, 110, 194, 0.6) 80.43%
            );
            border: 0.58px solid;

            border-image-source: linear-gradient(
              90deg,
              rgba(220, 237, 255, 0.32) 0%,
              #dcedff 45.95%,
              rgba(220, 237, 255, 0.32) 95.89%
            );

            box-shadow: 0px 0px 9.23px 0px #06b7fd inset;

            // box-shadow: 0px 4.62px 6.92px 0px #06b7fd85;

            backdrop-filter: blur(2.307692289352417px);

            // border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            &:hover {
              opacity: 0.8;
            }
          }

          .btn2 {
            width: 140px;
            height: 30px;
            margin: 0 10px;
            font-size: 16px;
            letter-spacing: 0.1em;
            // background: url(./btn2.png) no-repeat;
            // background-size: contain;
            border: 0.58px solid;

            border-image-source: linear-gradient(
              90deg,
              rgba(255, 255, 255, 0.32) 0%,
              #ffffff 45.95%,
              rgba(255, 255, 255, 0.32) 95.89%
            );
            box-shadow: 0px 0px 9.23px 0px #ff3036 inset;

            box-shadow: 0px 4.62px 6.92px 0px #ff303633;

            backdrop-filter: blur(2.307692289352417px);
            background: linear-gradient(
              180deg,
              rgba(0, 40, 81, 0.6) -10.87%,
              rgba(255, 48, 54, 0.6) 80.43%
            );
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;

            &:hover {
              opacity: 0.8;
            }
          }
          .tips {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
    .right_video {
      width: 46%;
      height: 100%;
      .videoList {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        li {
          width: 48%;
          margin-bottom: 10px;
          height: 200px;
          margin-right: 2%;
          background: #000;
          border: 1px solid transparent;
          cursor: pointer;
          &.active {
            border: 1px solid red;
          }

          .videoRef {
            height: 100%;
          }
          .bg {
            height: 100%;
            background: url(./liveVideo.png) no-repeat;
            background-size: contain;
            transform: translateX(10px);
          }
        }
      }
    }
  }
}
</style>
